<template>
    <div class="conatainer" v-loading="showPage">
        <div class="form-wrap">
            <div class="form-item">
                <label>联系电话<i class="iconfont icon-xinghao"></i></label>
                <div class="form-input">
                    <input type="tel" placeholder="请填写联系电话" v-model="form.mobile" />
                </div>
            </div>
            <div class="form-item2">
                <label>所需货品<i class="iconfont icon-xinghao"></i></label>
                <div class="form-textarea">
                    <textarea v-model="form.goods_name"></textarea>
                </div>
            </div>
        </div>
        <div class="save-btn-wrap">
            <el-button class="save-btn" :disabled="isDisabled" :loading="isLoading" @click='sbmitForm'>提交</el-button>
        </div>
        <div class="search-wrap">
            <h2>历史找货</h2>
            <ul class="serach-list" v-if="list.length > 0">
                <li v-for="(item, index) in list" :key="index">
                    <i>{{ item.create_time }}</i>
                    <span>{{ item.goods_name }}</span>
                    <em>{{ item.mobile }}</em>
                </li>
            </ul>
            <div class="no-data-con" v-else>
                <no-data></no-data>
            </div>
        </div>
        <pagination-footer :total="total"></pagination-footer>
    </div>
</template>

<script>
import PaginationFooter from "@/components/PaginationFooter.vue";
import {
    findGoods, historyFindGoods
} from '../../api/user'
export default {
    props: {
        tabIndex: {
            type: Number,
            default: 0,
        },
    },
    components: {
        PaginationFooter,
    },
    data() {
        return {
            form: {
                goods_name: '',
                mobile: ''
            },
            isDisabled: false,
            isLoading: false,
            page: 1,
            total: '',
            list: [],
            showPage: false,
        };
    },
    created() {
        this.showPage = true;
        this.getList()
    },
    methods: {
        getList() {
            const that = this;
            historyFindGoods({
                page: that.page,
            }).then(res => {
                that.showPage = false;
                if (res.code == 0) {
                    that.list = res.data.data;
                    that.total = res.data.total;
                }
            })
        },
        sbmitForm() {
            const that = this;
            if (!that.form.mobile) {
                that.$message.error('请输入手机号')
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(that.form.mobile))) {
                that.$message.error('手机号码不合法，请重新输入');
                return;
            }
            if (!that.form.goods_name) {
                that.$message.error('请输入货品名称');
                return;
            }
            that.isDisabled = true;
            that.isLoading = true;
            findGoods(that.form).then(res => {
                if (res.code == 0) {
                    that.isDisabled = false;
                    that.isLoading = false;
                    that.$message.success(res.msg);
                    that.form.goods_name = '';
                    that.form.mobile = ''
                    that.page = 1,
                    that.total = '';
                    that.list = [];
                    that.getList()
                } else {
                    that.isDisabled = false;
                    that.isLoading = false;
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
$supplier-color: #30b30e;

.conatainer {
    width: 100%;
    padding-bottom: 130px;
}

.form-wrap {
    width: 100%;
    height: 232px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    margin-top: 12px;
    label {
        width: 70px;
        font-size: 14px;
        i {
            font-size: 8px;
            position: relative;
            bottom: 2px;
            color: #ff3838;
        }
    }

    .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        .form-input {
            flex: 1;
            height: 42px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;

            input {
                width: 100%;
                height: 100%;
            }
        }
    }
    .form-item2 {
        flex-direction: column;
        .form-textarea {
            width: 100%;
            height: 115px;
            background: #f9f9f9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            margin-top: 20px;
            textarea {
                background: #f9f9f9;
                width: 100%;
                height: 100%;
                padding-top: 10px;
                box-sizing: border-box;
            }
        }
    }
}
.save-btn-wrap {
    width: 330px;
    margin: 24px auto 0;
}
.save-btn {
    width: 330px;
    height: 40px;
    background: linear-gradient(90deg, #5dc751 0%, #52b148 100%);
    border-radius: 52px;
    color: #fff;
    font-weight: bold;
    border: none;
    &.is-disabled {
        background-color: rgba(48, 179, 14, 0.5);
        color: rgba(255, 255, 255, 0.5);
    }
}

.search-wrap {
    padding: 20px 12px;
    background: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 20px;
    h2 {
        width: 100%;
        height: 44px;
        background: #f8f9fd;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
        line-height: 44px;
    }
    .serach-list {
        li {
            padding: 12px 12px;
            // min-height: 44px;
            background: #fff;
            border-radius: 8px;
            display: flex;
            i {
                padding-right: 50px;
            }
            span {
                flex: 1;
            }
            em {
                font-style: normal;
            }
            &:nth-of-type(2n) {
                background: #f8f9fd;
            }
        }
    }
}
</style>